<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '地址列表',
  },
}
</route>
<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getAddressList, deleteAddress } from '@/service/user/address'
import { useMessage, useToast, useQueue } from 'wot-design-uni'
import { type CustomAddressVo } from '@/service/user/address.d'
const AddressItem = defineAsyncComponent(
  () => import('@/components/address/addressItem/addressItem.vue'),
)
const message = useMessage()
const toast = useToast()
const { closeOutside } = useQueue()
// 地址列表数据
const addressList = ref<CustomAddressVo[]>([])
// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)

// 加载地址列表
const loadAddressList = async (reset = false) => {
  try {
    if (reset) {
      currentPage.value = 1
      addressList.value = []
    }
    console.log(addressList.value)

    const { code, data } = await getAddressList({
      current: currentPage.value,
      size: pageSize.value,
    })

    if (reset) {
      addressList.value = data.records
    } else {
      addressList.value = [...addressList.value, ...data.records]
    }

    // hasMore.value = data.records.length >= pageSize.value
    currentPage.value += 1
  } catch (error) {
    console.error('加载地址列表失败:', error)
  } finally {
    // loading.value = false
  }
}

// 初始化加载
onShow(() => {
  // 监听刷新事件
  // uni.$on('address-list-refresh', handleRefresh)
  loadAddressList(true)
})
const handleRefresh = () => {
  // 带加载状态的刷新
  uni.showLoading({ title: '刷新中...' })
  loadAddressList(true).finally(() => {
    uni.hideLoading()
  })
}

// 滚动加载
const onScrollToLower = () => {
  loadAddressList()
}

const handleEditAddress = (type: 'add' | 'edit', item?: CustomAddressVo) => {
  uni.navigateTo({
    url: `/pages/my/address/edit?type=${type}&id=${item?.id || ''}`,
  })
}
const handleDeleteAddress = (id: number) => {
  message
    .confirm({
      msg: '确定要删除该地址吗？',
      title: '温馨提示',
    })
    .then(async () => {
      toast.loading('加载中')
      try {
        await deleteAddress(id)
        toast.show('删除成功')

        loadAddressList(true)
      } catch (error) {
        toast.show('删除失败')
      }
      toast.close()
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
    .finally(() => {
      console.log(222)
    })
}
</script>

<template>
  <!-- 地址列表 -->
  <scroll-view class="address-list" scroll-y @scrolltolower="onScrollToLower">
    <AddressItem
      @click.stop="closeOutside"
      v-for="item in addressList"
      :key="item.id"
      @delete="handleDeleteAddress"
      :address-item="item"
    />

    <!-- 空状态 -->
    <wd-status-tip v-if="addressList.length === 0" image="search" tip="暂无收货地址" />

    <!-- 加载提示 -->
    <!-- <view v-if="loading" class="loading-text">加载中...</view>
    <view v-if="!hasMore && addressList.length > 0" class="no-more">没有更多数据了~</view> -->
  </scroll-view>

  <!-- 新增按钮 -->
  <view class="add-btn">
    <wd-button
      block
      type="primary"
      custom-style="border-radius: 50px; width:700rpx; background-color: #ff5f15;"
      @click="handleEditAddress('add')"
    >
      <wd-icon name="plus" />
      新增收货地址
    </wd-button>
  </view>
</template>
<style lang="scss" scoped>
.address-list {
  width: 750rpx;
  height: calc(100vh - 100rpx);
  padding: 12rpx 0;

  .loading-text,
  .no-more {
    padding: 10rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
  }
}

.add-btn {
  position: fixed;
  bottom: 20rpx;
  left: 20rpx;
}
</style>
